<template>
  <div class="container" v-loading="loading" element-loading-text="努力加载中...">
    <div class="inner-container">
      <div class="section-header">
        <div class="title">病情诊断</div>
        <el-button v-if="enableEdit" class="edit-button" @click="dynamicEdit">
          <font-awesome-icon :icon="['fas','fa-pencil-alt']" class="edit-icon"></font-awesome-icon>
          <el-text v-if="!editMode"  class="edit-text">编辑</el-text>
          <el-text v-if="editMode"  class="edit-text">保存</el-text>
        </el-button>
      </div>
      <div class="section-content">
        <div v-if="editMode" class="section-content-input">
          <el-input  type="textarea" class="input-area"  :rows="4" v-model="diagnosisData.diagnosis"></el-input>
        </div>
        <el-text v-else class="text-content">{{ diagnosisData.diagnosis }}</el-text>
      </div>

      <el-row v-if="!enableEdit"  justify  class="footer">
        <el-col :span="18"></el-col>
        <el-col :span="6">医生: {{ diagnosisDoctor }}</el-col>
        <el-col :span="18"></el-col>
        <el-col :span="6">日期: {{ diagnosisTime }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import ReferenceType from "@/components/ReferenceType.vue";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import '@/assets/css/reportCard.css';
import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
import sleepData from "@/api/sleepData.js";
import doctor from "@/api/doctor";
import report from "@/api/report.js";
onMounted(() => {
  getDiagnosisData(props.currentReportId);
});
onUnmounted(()=>{
  console.log("onumounted")
  updateEvaluation()
});
const props = defineProps({
  currentReportId: Number,
  enableEdit:Boolean
});
//随时更新最新的数据
watch(() => props.currentReportId, (newId) => {
  getDiagnosisData(newId);
});
watch(() => props.enableEdit, (newValue) => {
  console.log("watch")
  enableEdit.value = newValue
});
console.log("111111111111")
console.log(props.enableEdit)


const editMode=ref(false)
const loading = ref(false)
const evaluationBackup = ref('')
const getDiagnosisData = (reportId)=>{
  loading.value = false
  sleepData.getDiagnosisData(reportId).then((res)=>{
    if (res.data.code === 200 && res.data.data !== null){
      diagnosisData.value = res.data.data
      console.log(diagnosisData.value)
      evaluationBackup.value = diagnosisData.value.diagnosis
    }else{
      diagnosisData.value.id = "1"
      diagnosisData.value.reportId = ""
      diagnosisData.value.stateStatistics = ""
      diagnosisData.value.breatheStatistics = ""
      diagnosisData.value.diagnosis = ""
      diagnosisData.value.doctorId = "-1"
      diagnosisData.value.diagnosisTimestamp = 0
    }
  }).catch((err)=>{
    console.log(err)
  }).finally(() => {
    loading.value = false; // 使用箭头函数包装
  });
}
const diagnosisData=ref({
  id: "1",
  reportId: "",
  stateStatistics: "",
  breatheStatistics: "",
  diagnosis: "",
  doctorId: "-1",
  diagnosisTimestamp: 0
})

//计算得到医生名字
const diagnosisDoctor = ref("");
watch(() => diagnosisData.value.doctorId, (newDoctorId) => {
  console.log("New Doctor ID:", newDoctorId);
  if (newDoctorId !== "" && newDoctorId !== undefined && newDoctorId !== '-1') {
    doctor.getDoctorName(newDoctorId).then((res) => {
      if (res.data.code === 200) {
        diagnosisDoctor.value = res.data.data;
      }
    }).catch((err) => {
      console.log(err);
    });
  } else {
    diagnosisDoctor.value = "";
  }
}, { immediate: true });



// 计算 diagnosisTime
const diagnosisTime = computed(() => {
  const timestamp = diagnosisData.value.diagnosisTimestamp;
  if (!timestamp || timestamp === 0) return '';
  const date = new Date(timestamp);
  return date.toLocaleString(); // 返回本地化的日期和时间字符串
});


const dynamicEdit = (index)=>{
  editMode.value = !editMode.value
  if (editMode.value === false){
    // updateEvaluation()
  }
}

const updateEvaluation = ()=>{
  console.log("更新诊断记录")

  const updateDiagnosisDto = {
    reportId: props.currentReportId,
    evaluation: diagnosisData.value.diagnosis
  }
  report.updateDiagnosis(updateDiagnosisDto).then((res)=>{
    if (res.data.code === 200){

    }
  }).catch((err)=>{
    console.log(err)
  })
}
</script>
<style scoped lang="scss">
.container {
  width: 90%;
  height: 100%;
  background-color: #eff2f9;
  border-radius: 20px;
  .inner-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      height: 5%;
      margin-top: 2%;
    }

    .title {
      width: 20%;
      font-size: 18px;
      height: 100%;
      margin-left: 20px;
      align-items: center;
      display: flex;
    }

    .section {
      width: 100%;
    }

    .section-title {
      font-size: 16px;
      margin-left: 5%;
      font-weight: bold;
    }

    .section-header {
      width: 100%;
      display: flex;
      margin-top: 20px;
      justify-content: center;
      align-items: center;
    }

    .edit-button {
      margin-left: auto;
      background-color: #eff2f9;
      border: none;
    }

    .edit-icon {
      color: #3dd986;
      margin-left: 10px;
      margin-right: 10px;
      width: 20px;
      height: 20px;
    }

    .edit-text {
      font-size: 17px;
      color: #3dd986;
    }

    .section-content {
      width: 100%;
      display: flex;
      align-items: center;
    }
    .section-content-input{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .input-area {
      height: 100%;
      width: 95%;
    }

    .text-content {
      font-size: 16px;
      margin-left: 5%;
    }

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      margin-bottom: 5vh;
    }
  }

}



</style>